<template>
	<div class='home_container'>
		<div class="homeContent">
			<div class='home_aside'>
				<!-- <minAi url="/ai/dify/learning/66f664616e55392f9917dde0/chatMessages" /> -->
				<AIConsulting size="small" type="chat"></AIConsulting>
			</div>
			<div class='home_content'>
				<a-tabs v-model:activeKey="activeKey" style="height: 100%; width: 100%;" @change='tabsChange'>
					<a-tab-pane key="1" tab="参与的项目" style='height: 100%;padding-bottom:55px'>
						<UserProjectList :projectList="joinedProjectList" :pageData='joinedPageData'
							@projectItemClick="joinedProjectItemClick" @paginationChange='joinPaginationChange' type='join'/>
					</a-tab-pane>
					<a-tab-pane key="2" tab="收藏的项目" style='height: 100%;padding-bottom:55px'>
						<UserProjectList :projectList="collectedProjectList" :pageData='collectedPageData' :getCollectedList='getCollectedList'
							@projectItemClick="collectedProjectItemClick" @paginationChange='collectPaginationChange' />
					</a-tab-pane>
					<a-tab-pane key="3" tab="申请的项目" style='height: 100%;padding-bottom:55px'>
						<UserProjectList :projectList="applyedProjectList" :pageData='applyedPageData' :getCollectedList='getApplyedList'
							@projectItemClick="applyedProjectItemClick" @paginationChange='applyPaginationChange' type='apply'/>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
	</div>
</template>

<script setup>
import minAi from '@/components/common/minAi.vue'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import UserProjectList from '@/components/UserProjectList.vue';
	import SquareProjectList from '@/components/SquareProjectList.vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		getCollectedProjectList,
		getJoinedProjectList,
		getStudentInformation
	} from '@/request/personalCenter.js'
	import {refreshToken} from '@/request/login.js';
	import {
		state,
		isTeacher
	} from "@/stores/info";
import AIConsulting from '@/components/AIConsulting.vue'
import {checkGrade} from '@/request/projectSquare.js';

const router = useRouter();
const route = useRoute();
isTeacher() ? router.replace({name: 'teacher'}) : router.replace({name: 'PersonalCenter'})

	onMounted(async () => {
		console.log(state.userInfo.token, '!!!!!!!2312312312')
		await getJoinedList()
		await getCollectedList()
		await getApplyedList()
	})
	


	///////////获取收藏列表，参与列表
	let collectedProjectList = reactive([]);
	let joinedProjectList = reactive([]);
	let applyedProjectList = reactive([]);

	async function getJoinedList(data) {
		const res = await getJoinedProjectList(data);
		console.log('参与res', res)
		if (res&&res.code === 200) {
			const resData = res.data;
			joinedPageData.total = resData.page.totalElements;
			joinedPageData.page = resData.page.number + 1;
			joinedPageData.size = resData.page.size;
			if (resData.content.length == 0) {
				if (joinedProjectList.length == 0) {
					return
				} else {
					joinedProjectList.splice(0, joinedProjectList.length);
				}
			} else {
				if (joinedProjectList.length == 0) {
					joinedProjectList.push(...resData.content)
				} else {
					joinedProjectList.splice(0, joinedProjectList.length, ...resData.content);
				}
			}
			console.log('获取参与项目列表', joinedProjectList)
			console.log('获取参与分页', joinedPageData)
			// console.log(pageData,projectList)
		}
	}
	
	async function getApplyedList(data) {
		const res = await getJoinedProjectList({...data,search_AND_IN_auditStatus:0});
		console.log('申请res', res)
		if (res&&res.code === 200) {
			const resData = res.data;
			joinedPageData.total = resData.page.totalElements;
			joinedPageData.page = resData.page.number + 1;
			joinedPageData.size = resData.page.size;
			if (resData.content.length == 0) {
				if (applyedProjectList.length == 0) {
					return
				} else {
					applyedProjectList.splice(0, applyedProjectList.length);
				}
			} else {
				if (applyedProjectList.length == 0) {
					applyedProjectList.push(...resData.content)
				} else {
					applyedProjectList.splice(0, applyedProjectList.length, ...resData.content);
				}
			}
			// console.log('获取参与项目列表', joinedProjectList)
			// console.log('获取参与分页', joinedPageData)
			// console.log(pageData,projectList)
		}
	}
	

	async function getCollectedList(data) {
		const res = await getCollectedProjectList(data);
		console.log('收藏列表', res)
		if (res&&res.code === 200) {
			const resData = res.data;
			collectedPageData.total = resData.page.totalElements;
			collectedPageData.page = resData.page.number + 1;
			collectedPageData.size = resData.page.size;
			console.log('原始收藏列表长度', collectedProjectList.length)
			if (resData.content.length == 0) {
				if (collectedProjectList.length == 0) {
					return
				} else {
					collectedProjectList.splice(0, collectedProjectList.length);
				}
			} else {
				if (collectedProjectList.length == 0) {
					collectedProjectList.push(...resData.content)
				} else {
					collectedProjectList.splice(0, collectedProjectList.length, ...resData.content);
				}
			}
			console.log('获取收藏项目列表', collectedProjectList)
			console.log('获取收藏分页', collectedPageData)
			// console.log(pageData,projectList)
		}
	}

	///////////////////////////分页
	const joinedPageData = reactive({
		total: 0,
		page: 0,
		size: 0
	})
	const applyedPageData = reactive({
		total: 0,
		page: 0,
		size: 0
	})
	const collectedPageData = reactive({
		total: 0,
		page: 0,
		size: 0
	})

	async function joinPaginationChange(page, size) {
		console.log('参与的分页变了', page, size)
		joinedPageData.page = page;
		joinedPageData.size = size;
		let data = {
			page: page - 1,
			size: size,
		}
		await getJoinedList(data);
	}
	
	async function applyPaginationChange(page, size) {
		console.log('参与的分页变了', page, size)
		joinedPageData.page = page;
		joinedPageData.size = size;
		let data = {
			page: page - 1,
			size: size,
		}
		await getApplyedList(data);
	}

	async function collectPaginationChange(page, size) {
		console.log('收藏的分页变了', page, size)
		joinedPageData.page = page;
		joinedPageData.size = size;
		let data = {
			page: page - 1,
			size: size,
		}
		await getCollectedList(data);
	}
//////////////标签页
	let activeKey = ref('1');
	async function tabsChange(key){
		activeKey.value=key;
		console.log('标签页',activeKey.value)
		if(key==2){
			await getCollectedList()
		}else if(key==1){
			await getJoinedList()
		}
	}

	/////////////////点击项目跳转
	function joinedProjectItemClick(item) {
		if(!isTeacher()){

			router.push({
				name: 'studentProcess',
			  	query: { id: item.id,name:item.name,template:item.projectTemplate }
			})
			// let href = router.resolve({
			//   name: 'studentProcess',
			//   query: { id: item.id,name:item.name,template:item.projectTemplate },
			// })
			// window.open(href.href, '_blank')
		}
	}


function applyedProjectItemClick(item) {
		if(!isTeacher()){
			let href = router.resolve({
			  name: 'ApplyProjectDetail',
			  query: { id: item.id, auditStatus:item.auditStatus
			  },
			})
			window.open(href.href, '_blank')
		}
	}

	async function collectedProjectItemClick(item) {
		console.log('Task clicked:', item);
		let res=await checkGrade(item.id)
		if(res&&res.code==200&&res.data){
			let href = router.resolve({
			  name: 'ProjectInterview',
			  query: { id:item.id,isCheckedJob:true },//年级符合
			})
			window.open(href.href, '_blank')
		}
		if(res&&res.code==200&&!res.data){
			let href = router.resolve({
			  name: 'studentProcessProjectDetail',
			  query: {id:item.id,isCheckedJob:false },//年级不符合
			})
			window.open(href.href, '_blank')
		}
	}
</script>

<style lang='scss' scoped>
	*{
		box-sizing: border-box;
	}
	$homeAsideWidth: 30%;
	$userImgWidth: 100px;
	$asideMarginRight: 15px;
	$aiContainerFontSize:12px;
	
	.home_container {
		position: relative;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		.homeContent {
			padding: 30px 0;
			width: $viewMinWidth;
			display: flex;
			justify-content: space-between;
			min-width: 0;
			min-height: 0;
		}
		.home_aside {
			width: $homeAsideWidth;
			height: 100%;
			font-size: $aiContainerFontSize;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: $asideMarginRight;
			border-radius: 10px;
			background: #fff;
			overflow: hidden;
			.home_aside_userImg {
				width: $userImgWidth;
				height: $userImgWidth;
				min-height: 100px;
				min-width: 100px;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 8px;
				img {
					width: 100%;
					height: 100%;
				}
			}

			.home_aside_name {
				font-size: 20px;
				font-weight: bold;
			}

			.home_aside_information {
				width: 100%;
				height: 100%;
				overflow: auto;
				display: flex;
				flex-direction: column;
				align-items: center;

				.home_aside_information_item {
					width: 80%;
					margin-top: 10px;
					min-width: 100px;
					line-height: 24px;
				}
			}
		}

		.home_content {
			background: #fff;
			flex: 1;
			height: 100%;
			border-radius: 10px;
			padding: 5px 20px;
			overflow: auto;
			
			:deep(.ant-tabs .ant-tabs-content){
				height:100%;
			}
		}
	}
 </style>
